<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="themes/icon.css" rel="stylesheet" type="text/css" >
    <link href="themes/default/easyui.css" rel="stylesheet" type="text/css" >
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.easyui.min.js"></script>
</head>
<body>
    <div style="float: left;" >
        <ul class="easyui-tree" checkbox="true" >
            <li>
                <span>菜单1</span>
                <ul>
                    <li>menu-1-1</li>
                    <li>menu-1-2</li>
                    <li>menu-1-3</li>
                    <li>menu-1-4</li>
                    <li>menu-1-5</li>
                    <li>menu-1-6</li>
                </ul>
            </li>
            <li>
                <span>菜单2</span>
                <ul>
                    <li>menu-2-1</li>
                    <li>menu-2-2</li>
                    <li>menu-2-3</li>
                    <li>menu-2-4</li>
                    <li>menu-2-5</li>
                    <li>menu-2-6</li>
                    <li>menu-2-7</li>
                    <li>menu-2-8</li>
                    <li>menu-2-9</li>
                    <li>menu-2-10</li>
                </ul>
            </li>
        </ul>
    </div>

    <div  style="float: left;" >
        <ul class="easyui-tree" data-options="checkbox:true"  >
            <li>
                <span>data-options属性</span>
                <ul>
                    <li>menu-1-1</li>
                    <li>menu-1-2</li>
                    <li>menu-1-3</li>
                    <li>menu-1-4</li>
                    <li>menu-1-5</li>
                    <li>menu-1-6</li>
                </ul>
            </li>
            <li>
                <span>菜单2</span>
                <ul>
                    <li>menu-2-1</li>
                    <li>menu-2-2</li>
                    <li>menu-2-3</li>
                    <li>menu-2-4</li>
                    <li>menu-2-5</li>
                    <li>menu-2-6</li>
                    <li>menu-2-7</li>
                    <li>menu-2-8</li>
                    <li>menu-2-9</li>
                    <li>menu-2-10</li>
                </ul>
            </li>
        </ul>
    </div>
  
<div style="float: left;" >
    <ul id="tree" >
        <li>
            <span>js加载的tree</span>
            <ul>
                <li>menu-1-1</li>
                <li>menu-1-2</li>
                <li>menu-1-3</li>
                <li>menu-1-4</li>
                <li>menu-1-5</li>
                <li>menu-1-6</li>
            </ul>
        </li>
        <li>
            <span>菜单2</span>
            <ul>
                <li>menu-2-1</li>
                <li>menu-2-2</li>
                <li>menu-2-3</li>
                <li>menu-2-4</li>
                <li>menu-2-5</li>
                <li>menu-2-6</li>
                <li>menu-2-7</li>
                <li>menu-2-8</li>
                <li>menu-2-9</li>
                <li>menu-2-10</li>
            </ul>
        </li>
    </ul>
</div>
<div style="clear: both;" >

</div>

<script>
$(function(){
    $('#tree').tree({
        checkbox:true
    });
});
</script>

</body>
</html>